<!--
 * @Descripttion: 饿了么按钮底层封装
 * @version: 
 * @Author: wl
 * @Date: 2020-07-06 15:18:08
 * @LastEditors: wl
 * @LastEditTime: 2020-07-07 17:20:51
-->
<template>
  <div class="table-tool-box" v-if="selfTool.length>0">
    <el-button
      :type="selfTool[0].type||'primary'"
      :class="'table-btn'+(selfTool.length>1?'hasmore':'')"
      @click="selfTool[0].click(row,selfTool[0].param)"
    >{{selfTool[0].name}}</el-button>
    <el-popover trigger="hover" placement="bottom" popper-class="com-action-bar action-bar-radius">
      <ul>
        <template v-for="(item,index) in selfTool">
          <p
            class="sub-btn"
            :key="index"
            v-if="index>0"
            @click="item.click(row,item.param)"
          >{{item.name}}</p>
        </template>
      </ul>
      <div slot="reference" class="name-wrapper">
        <el-button
          v-if="self.length>1"
          class="table-btn-icon"
          type="primary"
          icon="el-icon-arrow-down"
        ></el-button>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selfTool: []
    };
  },
  props: {
    tools: {
      type: Array,
      default: () => {
        return [];
      }
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    watch: {
      row: {
        handler: function(to) {
          this.checkTool(to);
        },
        deep: true
      }
    },
    methods: {
      checkTool: function(data) {
        let list = [];
        let tools = this.tools || [];
        tools.map(item => {
          let rule = item;
          let flag = true;
          if (rule) {
            flag = rule(data);
          }
          if (flag) {
            list.push(item);
          }
        });
        this.selfTool = list;
      }
    },
    created() {
      this.checkTool(this.row);
    }
  }
};
</script>

<style lang='scss' scoped>

.table-tool-box  {
    width: 100%;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 28px;
}

.com-action-bar.action-bar-radius  {
    border-radius: 4px;
    background: #fff;
}

button.table-btn  {
    line-height: 28px;
    padding: 0 0px;
    height: 28px;
    text-align: center;
    position: absolute;
    z-index: 10;
    left: 0;
    top: 0;
    width: 90px;
    // font-size: 14px;
}
button.table-btn.hasmore  {
    width: 62px;
    min-width: 62px;
    border-radius: 4px 0 0 4px;
}
button.table-btn-icon  {
    line-height: 28px;
    padding: 0 6px;
    height: 28px;
    text-align: center;
    border: 1px solid #758DFF !important;
    width: 90px;
    text-align: right;
}
button.table-btn-icon:hover  {
    background: #fff !important;
}
.sub-btn  {
    line-height: 28px;
    padding: 0 10px;
    height: 28px;
    border-radius: 4px;
    width: 100%;
    text-align: left;
    min-width: 90px;
    cursor: pointer;
    // background: #e4eafb;
    background: #fff;
    font-size: 14px;
}
.sub-btn:hover  {
    background: #758dff !important;
    color: #fff;
}
</style>
